<template>
    <view class="historyPage bg-fff">
        <block v-for="item in historyList" :key="item.id">
            <view class="prodItem">
                <product-item :product="item"></product-item>
            </view>
        </block>
        <u-loadmore :status="loadingType" v-if="historyList.length > 0" />
		<up-empty mode="list" marginTop="100" v-if="historyList.length === 0 && loadingType === 'nomore'"></up-empty>
		<up-gap :height="40" />
    </view>
</template>
<script>
	import { loadHistoryProducts } from '@/common/api/my'
	export default {
		data() {
			return {
				historyList: [],
				next: '',
				loadingType: 'loadmore',
			}
		},
		onPullDownRefresh() {
			this.reset()
			this.loadData()
		},
		onReachBottom(){
			this.loadData()
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			reset(){
				this.historyList = [];
				this.next = ""
				this.loadingType = "loadmore"
			},
			//加载更多数据
			async loadData(){
				if(this.loadingType === 'loading' || this.loadingType === 'nomore'){
					//防止重复加载
					return;
				}
				let url = this.next || `/product/mall/v6/history`;
				this.loadingType = 'loading';
				try{
					const { status, detail } = await loadHistoryProducts(url);
					if(status !== 0){
						uni.$u.toast(detail);
						return;
					}
					this.historyList.push(...detail.results);
					this.next = detail.next
					this.loadingType = detail.next ? 'loadmore' : 'nomore';
				}catch(err){
					this.loadingType = 'loadmore';
				}
				uni.stopPullDownRefresh();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.historyPage{
		padding: 0rpx 30rpx;
		min-height: 100vh;
		overflow: hidden;
        .prodItem{
            margin-top: 10rpx;
            border-bottom: 1rpx solid rgba(0,0,0,.04);
            &:last-child{
                border: none;
            }
        }
	}
</style>
